<template>
  <div class="dept-table-container">
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="deptName"
          label="部门"
          width="180">
      </el-table-column>
      <el-table-column
          prop="code"
          label="部门别名">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新日期"
          width="180">
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DeptTable",
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 2
      },
      tableData: [],
      total: 0 // 总记录数
    }
  },
  methods: {
    listDept() {
      // 使用params传递分页参数
      axios.get("http://localhost:8080/depts", {
        params: this.pageInfo
      })
          .then(res => {
            const result = res.data
            this.tableData = result.data.list
            this.total = result.data.total // 假设后端返回总记录数
            console.log(this.total)
            console.log(this.tableData)
          })
          .catch(error => {
            console.error("获取部门列表失败:", error)
          })
    },
    // 处理每页条数变化
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.pageInfo.pageNum = 1 // 重置为第一页
      this.listDept()
    },
    // 处理当前页变化
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.listDept()
    }
  },
  created() {
    this.listDept()
  }
}
</script>

<style scoped>
.dept-table-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>
